<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form"  :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="商户名称">
              <el-input v-model="form.shopName" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="持卡人" >
              <el-input v-model="form.accountTitle" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行卡号" >
              <el-input v-model="form.cardNo" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核状态">
              <el-select v-model="form.auditStatus" clearable>
                <el-option
                  v-for="item in examineList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="11">
            <el-button type="primary" @click="searchList">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column type="index" label="序号"  align="center"/>
        <el-table-column prop="shopName" label="商户名称"  align="center"/>
        <el-table-column prop="bankTitle" label="银行名称"  align="center">
        </el-table-column>
        <el-table-column prop="cardNo" label="银行卡号" align="center" width="175px">
        </el-table-column>
        <el-table-column prop="accountTitle" label="持卡人" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="identity" label="身份证号" align="center" width="165px"/>
        <el-table-column prop="phone" label="手机号" align="center"/>
        <el-table-column prop="createdAt" label="绑定日期" align="center"/>
        <el-table-column prop="auditStatus" label="审核状态" align="center" width="110px">
          <template slot-scope="scope">
            {{scope.row.auditStatus | status}}
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="审核通过日期" align="center">
          <!-- <template slot-scope="scope">
            {{scope.row.members.realname}}
          </template> -->
        </el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="toRoutes('bankCardInfo',scope.row.cardId)"
            >查看</el-button>
            <el-button
              type="text"
              size="mini"
              v-if="scope.row.auditStatus == 0"
              @click="toRoutes('bankCardMsg',scope.row.cardId)"
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.pageNum"
            :page-sizes="page_sizes"
            :page-size="form.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  
  </div>
</template>

<script>

import { checkShopList} from '@/api/shopFinanceCard'
import commonFn from '@/utils/common'

export default {
  name:'bankCardCheck',
  data() {
    return {
      // loading层
      tableLoading: false,
      // 提交form
      examineList: [
        {
          name: '待审核',
          value: '0'
        },
        {
          name: '审核驳回',
          value: '2'
        },
        {
          name: '审核通过',
          value: '1'
        }
      ],
      form: {
        pageNum: 1,
        pageSize: 10,
        auditStatus:'',
        shopName:'',
        accountTitle:'',
        cardNo:'',
      },
      isShow: false,
      tableData: [],
      // 分页
      page_sizes: [10, 30, 50, 100],
      page_totals: 30
    }
  },
  filters: {
    status: function(val) {
      switch (val) {
        case 0:
          return '待审核'
          break
        case 1:
          return '审核成功'
          break
        case 2:
          return '审核驳回'
          break
        default:
          return '--'
          break
      }
    }
  },
  mounted() {
    this.getList()
  },
  beforeDestroy() {
    console.log(333)
  },
  methods: {
    // 路由跳转
    toRoutes(e, id) {
      const route = { name: e, query: { id: id }}
      this.$router.push(route)
    },
    
    // 查询
    searchList() {
      this.form.pageNum = 1
      this.getList(this.form)
    },
    // 列表数据获取
    getList() {
      this.tableLoading = true
      checkShopList(this.form)
        .then(res => {
          //  console.log(res.data)
          if (res.data.code == 0) {
            // console.log(res)
            this.tableData = res.data.data.list;
            this.page_totals = res.data.data.count;
            this.tableLoading =false

          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
 
    //导出
    handleExport() {
      plusOrderExpor({
        order_sn:this.form.order_sn,
        time:this.form.time,
        card_name:this.form.card_name,
        username:this.form.username,
      })
        .then(res => {
          commonFn.downFile('plus订单', res)
        })
        .catch(err => {
          this.errorStatus(err)
        })
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getList(this.form)
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.getList(this.form)
    },
    
  }
}
</script>
<style scoped>
.app-container {
padding: 20px !important;
}
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
</style>
